import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from './vars.css';

const svgChecked =
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z" /></svg>';
const svgUnchecked =
	'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>';

export const knnoRadio = style({
	appearance: 'none',
	display: 'inline-block',
	fontSize: '1em',
	width: '1.2em',
	height: '1.2em',
	verticalAlign: 'middle',
	backgroundColor: vars.color.secondaryText,
	maskImage: "url('data:image/svg+xml;charset=utf8," + svgUnchecked + "')",
	maskSize: 'cover',
	cursor: 'pointer',
	border: 'none',
	boxSizing: 'border-box',
	margin: '0',
	flexShrink: 0,
	flexGrow: 0,
});

globalStyle(`${knnoRadio}:checked`, {
	backgroundColor: vars.color.accent,
	maskImage: "url('data:image/svg+xml;charset=utf8," + svgChecked + "')",
});

globalStyle(`${knnoRadio}.print`, {
	backgroundColor: vars.color.text,
});

globalStyle(`${knnoRadio}[disabled]`, {
	cursor: 'not-allowed',
	backgroundColor: vars.color.disabledText,
});
